let btn = document.querySelector('.btn')

btn.addEventListener('click', function(e) {
    // this.classList.add('ripple')
    // let ripple = document.createElement('div')
    // 当前元素距离窗口的坐标
    let btnX = this.offsetLeft
    let btnY = this.offsetTop

    // 鼠标的坐标
    let mouseX = e.x
    let mouseY = e.y

    // 鼠标在当前元素的坐标
    let x = mouseX - btnX
    let y = mouseY - btnY

    // ripple.style.width = 20 + 'px'
    // ripple.style.height = 20 + 'px'
    // ripple.style.opacity = 0.7
    // ripple.style.left = (x - 10) + 'px'
    // ripple.style.top = (y - 10) + 'px'
    // let scale = 1
    // let timer = setInterval(() => {
    //     scale += 0.3
    //     ripple.style.opacity = ripple.style.opacity - 0.01
    //     ripple.style.transform = `scale(${scale})`

    //     if (ripple.style.opacity <= 0) {
    //         btn.removeChild(ripple)
    //         clearInterval(timer)
    //     }
    // }, 10)

    let ripple = new Ripple()
    let rippleEl = ripple.create()
    rippleEl.style.left = (x - parseInt(ripple.style.width)) + 'px'
    rippleEl.style.top = (y - parseInt(ripple.style.height)) + 'px'

    rippleEl.classList.add('ripple')

    ripple.spread(rippleEl)

    this.appendChild(rippleEl)
})





class Ripple {
    style = {
        width: '20px',
        height: '20px',
        opacity: 0.7
    }
    scale = 1

    constructor(style, scale = 1) {
        this.style = Object.assign(this.style, style)
        this.scale = scale
    }

    create(tag_name = 'div') {
        let el = document.createElement(tag_name)
        for (const key in this.style) {
            el.style[key] = this.style[key]
        }
        return el
    }

    spread(el, delay = 10, scale = 0.3, opacity = 0.01) {
        let timer = setInterval(() => {
            this.scale += scale
            el.style.opacity = el.style.opacity - opacity
            el.style.transform = `scale(${this.scale})`

            if (el.style.opacity <= 0) {
                clearInterval(timer)
                el.parentNode.removeChild(el)
            }

        }, delay)
    }
}